<template>
    <div class="immediateProcessing">
        <div class="container">
            <div class="headerBox">
                <van-nav-bar title="产品详情">
                    <template #left>
                        <div class="headerLeftBtn">
                            <van-icon size=".48rem" color="#000000" name="arrow-left" @click="clickBack()"/>
                            <van-icon size=".48rem" color="#000000" name="cross" style="margin-left: .15rem;" />  
                        </div>
                    </template>
                </van-nav-bar>
            </div>
            <div class="bannerBox">
                <div class="imgBox">
                    <img src="@/assets/images/img2.png" alt="">
                </div>
            </div>
            <div class="buttons">
                <van-button round block type="info" @click="immediateProcessingAuth">立即办理</van-button>
                <van-button round block type="default">收藏</van-button>
            </div>
            <div class="content">
                <img src="@/assets/images/img3.png" alt="">
            </div>
        </div>
        <div class="footer" @click="handleImmediateProcessing">立即办理</div>
        <van-overlay :closeOnClickOverlay="true" :show="showDialog" @click="showDialog = false">
            <div class="wrapper">
                <div class="block">
                    <van-button round block type="info" @click="handleXw">小微</van-button>
                    <van-button round block type="default" @click="handleUnit">法人单位</van-button>
                </div>
            </div>
        </van-overlay>
        <van-action-sheet v-model="immediateFlag" title="云安全订购">
            <div class="content">
                <div class="immediateContent">
                    <img src="@/assets/images/img8.png" alt="">
                </div>
                <div class="footerImmediate">
                    <div class="left">
                        费用合计<span>¥720.00</span>配置<van-icon name="arrow-down" color="#666" />
                    </div>
                    <van-button round block type="default" @click="confirmOrder">确认订单</van-button>
                </div>
            </div>
        </van-action-sheet>
    </div>
</template>
<script>
export default {
    name: 'immediateProcessing',
    data() {
        return {
            showDialog: false,
            immediateFlag: false
        }
    },
    methods: {
        clickBack() {
            this.$router.push('/category')
        },
        immediateProcessingAuth() {
            // this.showDialog = true;111111
            this.$router.push('/onlineFilingLegalEntity')
        },
        handleImmediateProcessing() {
            this.immediateFlag = true;
        },
        handleXw() {
            this.$router.push('/onlineFilingXw')
        },
        handleUnit() {
            this.$router.push('/onlineFilingLegalEntity')
        },
        confirmOrder() {
            this.$router.push('/payment')
        }
    },
}
</script>
<style lang="less" scoped>
.immediateProcessing {
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    .container {
        flex: 1;
        overflow: auto;
        .bannerBox {
            height: 4.83rem;
            position: relative;
            .imgBox {
                img {
                    width: 100%;
                    display: block;
                }
            }
        }
        .content {
            width: 100%;
            img {
                width: 100%;
            }
        }
        .buttons {
            margin-top: .3rem;
            width: 100%;
            display: flex;
            justify-content: space-between;
            align-items: center;
            padding: 0 .2rem;
            button {
                width: 3.14rem;
                height: .8rem;
                border-radius: 0.2rem;
                font-size: 0.32rem;
                &:last-child {
                    background: #E9F4FF;
                    color: #2892FF;
                    border: 0 !important;
                }
            }
        }
    }
}
.footer {
    width: 100%;
    height: 1rem;
    line-height: 1rem;
    background: #2892FF;
    font-weight: normal;
    font-size: 0.34rem;
    color: #FFFFFF;
    text-align: center;
    font-style: normal;
}
.wrapper {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    .block {
        display: flex;
        justify-content: space-between;
        flex-direction: column;
        button {
            width: 3rem;
            height: 0.8rem;
            border-radius: .2rem;
            font-size: .32rem;
            margin-bottom: .1rem;
        }
    }
}
.immediateContent {
    padding: 0 .28rem;
    img {
        width: 100%;
    }
}
.footerImmediate {
    padding: 0 .3rem;
    height: 1.4rem;
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    .left {
        font-weight: normal;
        font-size: 0.24rem;
        color: #666666;
        text-align: left;
        font-style: normal;
        span {
            font-weight: 500;
            font-size: 0.44rem;
            color: #F9564A;
            text-align: left;
            font-style: normal;
            padding: 0 .12rem 0 .07rem;
        }
    }
    button {
        width: 2rem;
        height: 0.8rem;
        background: #2892FF;
        border-radius: 0.2rem;
        font-size: 0.32rem;
        color: #FFFFFF;
        text-align: center;
        font-style: normal;
    }
}
</style>